<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="../../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

    <script src="../../../jquery/jquery-1.11.1-min.js" type="text/javascript"></script>
    <script src="../../../jquery/bootstrap_3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>

<!-- 创建用户的模态窗口 -->
<div class="modal fade" id="createUserModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增用户</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-loginActNo">登录帐号<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-loginActNo" type="text">
                        </div>
                        <label class="col-sm-2 control-label" for="create-username">用户姓名</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-username" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-loginPwd">登录密码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-loginPwd" type="password">
                        </div>
                        <label class="col-sm-2 control-label" for="create-confirmPwd">确认密码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-confirmPwd" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-email">邮箱</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-email" type="text">
                        </div>
                        <label class="col-sm-2 control-label" for="create-expireTime">失效时间</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-expireTime" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-lockStatus">锁定状态</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-lockStatus">
                                <option></option>
                                <option>启用</option>
                                <option>锁定</option>
                            </select>
                        </div>
                        <label class="col-sm-2 control-label" for="create-org">部门<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-dept">
                                <option></option>
                                <option>市场部</option>
                                <option>策划部</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-allowIps">允许访问的IP</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-allowIps" placeholder="多个用逗号隔开" style="width: 280%"
                                   type="text">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" data-dismiss="modal" type="button">保存</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 30px; top: -10px;">
        <div class="page-header">
            <h3>用户列表</h3>
        </div>
    </div>
</div>

<div class="btn-toolbar" role="toolbar" style="position: relative; height: 80px; left: 30px; top: -10px;">
    <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">用户姓名</div>
                <input class="form-control" type="text">
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">部门名称</div>
                <input class="form-control" type="text">
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">锁定状态</div>
                <select class="form-control">
                    <option></option>
                    <option>锁定</option>
                    <option>启用</option>
                </select>
            </div>
        </div>
        <br><br>

        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">失效时间</div>
                <input class="form-control" id="startTime" type="text"/>
            </div>
        </div>

        ~

        <div class="form-group">
            <div class="input-group">
                <input class="form-control" id="endTime" type="text"/>
            </div>
        </div>

        <button class="btn btn-default" type="submit">查询</button>

    </form>
</div>


<div class="btn-toolbar" role="toolbar"
     style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px; width: 110%; top: 20px;">
    <div class="btn-group" style="position: relative; top: 18%;">
        <button class="btn btn-primary" data-target="#createUserModal" data-toggle="modal" type="button"><span
                class="glyphicon glyphicon-plus"></span> 创建
        </button>
        <button class="btn btn-danger" type="button"><span class="glyphicon glyphicon-minus"></span> 删除</button>
    </div>

</div>

<div style="position: relative; left: 30px; top: 40px; width: 110%">
    <table class="table table-hover">
        <thead>
        <tr style="color: #B3B3B3;">
            <td><input type="checkbox"/></td>
            <td>序号</td>
            <td>登录帐号</td>
            <td>用户姓名</td>
            <td>部门名称</td>
            <td>邮箱</td>
            <td>失效时间</td>
            <td>允许访问IP</td>
            <td>锁定状态</td>
            <td>创建者</td>
            <td>创建时间</td>
            <td>修改者</td>
            <td>修改时间</td>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td><input type="checkbox"/></td>
            <td>1</td>
            <td><a href="detail.html">zhangsan</a></td>
            <td>张三</td>
            <td>市场部</td>
            <td>zhangsan@bjpowernode.com</td>
            <td>2017-02-14 10:10:10</td>
            <td>127.0.0.1,192.168.100.2</td>
            <td>启用</td>
            <td>admin</td>
            <td>2017-02-10 10:10:10</td>
            <td>admin</td>
            <td>2017-02-10 20:10:10</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>2</td>
            <td><a href="detail.html">lisi</a></td>
            <td>李四</td>
            <td>市场部</td>
            <td>lisi@bjpowernode.com</td>
            <td>2017-02-14 10:10:10</td>
            <td>127.0.0.1,192.168.100.2</td>
            <td>锁定</td>
            <td>admin</td>
            <td>2017-02-10 10:10:10</td>
            <td>admin</td>
            <td>2017-02-10 20:10:10</td>
        </tr>
        </tbody>
    </table>
</div>

<div style="height: 50px; position: relative;top: 30px; left: 30px;">
    <div>
        <button class="btn btn-default" style="cursor: default;" type="button">共<b>50</b>条记录</button>
    </div>
    <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
        <button class="btn btn-default" style="cursor: default;" type="button">显示</button>
        <div class="btn-group">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
                10
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">20</a></li>
                <li><a href="#">30</a></li>
            </ul>
        </div>
        <button class="btn btn-default" style="cursor: default;" type="button">条/页</button>
    </div>
    <div style="position: relative;top: -88px; left: 285px;">
        <nav>
            <ul class="pagination">
                <li class="disabled"><a href="#">首页</a></li>
                <li class="disabled"><a href="#">上一页</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">下一页</a></li>
                <li class="disabled"><a href="#">末页</a></li>
            </ul>
        </nav>
    </div>
</div>

</body>
</html>